<template>
  <div class="layout-right-wrapper">
    <!--模块管理-->
    <div class="divider">
      <a-dropdown v-if="currentComponent" v-model:open="menuVisible">
        <div>
          <span class="margin-right-xxs">{{ currentComponent?.componentFunctionName }}模块</span>
          <component :is="menuVisible ? UpOutlined : DownOutlined" class="icon" />
        </div>
        <template #overlay>
          <a-menu>
            <a-menu-item
              v-for="(item, index) in pageData"
              :key="index"
              @click="handleClickItem(item)"
            >
              <span>{{ item.componentFunctionName }}模块</span>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
      <span v-else>画布管理</span>
    </div>

    <div class="content-wrapper">
      <div class="module" v-if="currentCompConfig">
        <component :is="currentCompConfig"></component>
      </div>
      <GlobalSetting v-else-if="!currentComponent" :store="store"></GlobalSetting>
      <AEmpty class="empty" v-else>
        <template #description>
          <span class="desc">暂无配置内容</span>
        </template>
      </AEmpty>
    </div>
  </div>
</template>

<script setup lang="ts">
import diyCompsConfig from './modules/index'
import { computed, type PropType, ref } from 'vue'
import { DiyStore } from '@/entity/DiyStore'
import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
import GlobalSetting from '../global-setting/index.vue'
import type { IDiyBase } from '@/diy/types'

const props = defineProps({
  store: {
    type: Object as PropType<DiyStore>,
    required: true
  }
})

const currentComponent = computed(() => {
  return props.store?.currentComponent
})

const currentCompConfig = computed(() => {
  const componentName = currentComponent.value?.componentName
  if (!componentName) {
    return null
  }
  return diyCompsConfig[componentName]
})

//模块管理
const pageData = computed(() => props.store?.previewData.pageData)
const menuVisible = ref(false)

const handleClickItem = (item: IDiyBase) => {
  props.store?.setCurComponent(item)
  menuVisible.value = false
}
</script>

<style scoped lang="less">
.layout-right-wrapper {
  .divider {
    font-size: 14px;
    margin-bottom: 12px;
    font-weight: 800;
    border-bottom: 1px solid #f1efef;
    padding: 10px 12px;
    cursor: pointer;
    .icon {
      font-size: 10px;
    }
  }

  .content-wrapper {
    .module {
      padding: 0 10px 12px;
    }
  }
}
</style>
